<template>
  <div class="test-home-container">
    <SideMenu
      :items="menuItems"
      :activeIndex="activeIndex"
      @select="handleSelect"
    />
    <div ref="mainContent" class="main-content-test"><router-view /></div>
  </div>
</template>

<script setup>
import { ref, watchEffect, onMounted, watch, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import SideMenu from "@/components/SideMenu.vue";

const store = useStore();
const mainContent = ref(null);
const activeIndex = ref("0");
const route = useRoute();
const router = useRouter();

const menuItems = computed(() => {
  const items = [
    {
      index: "0",
      icon: "HomeFilled",
      title: `考卷信息${
        store.getters.paperCount > 0 ? ` (${store.getters.paperCount})` : ""
      }`,
    },
    {
      index: "1",
      icon: "List",
      title: "我的试卷",
    },
    {
      index: "2",
      icon: "DataAnalysis",
      title: "成绩分析",
    },
  ];

  if (route.path === "/test/startTest") {
    items.push({
      index: "3",
      icon: "Timer",
      title: "开始考试",
    });
  }

  if (route.path === "/test/answer") {
    items.push({
      index: "4",
      icon: "Search",
      title: "查看试卷",
    });
  }

  return items;
});

// 监听路由变化，动态设置padding
watch(
  () => route.path,
  (newPath) => {
    if (mainContent.value) {
      if (newPath === "/test/startTest") {
        mainContent.value.style.paddingRight = "0";
      } else {
        mainContent.value.style.padding = "0 20px";
      }
    }
  },
  { immediate: true }
);

onMounted(() => {
  // 初始设置padding
  if (mainContent.value) {
    if (route.path === "/test/startTest") {
      mainContent.value.style.paddingRight = "0";
    } else {
      mainContent.value.style.padding = "0 20px";
    }
  }
});

watchEffect(() => {
  if (route.path.includes("/test/answer")) {
    activeIndex.value = "4";
  } else if (route.path.includes("/test/startTest")) {
    activeIndex.value = "3";
  } else if (route.path.includes("/test/echarts")) {
    activeIndex.value = "2";
  } else if (route.path.includes("/test/result")) {
    activeIndex.value = "1";
  } else {
    activeIndex.value = "0";
  }
});

const handleSelect = (key) => {
  activeIndex.value = key;
  switch (key) {
    case "0":
      router.push("/test/index");
      break;
    case "1":
      router.push("/test/result");
      break;
    case "2":
      router.push("/test/echarts");
      break;
  }
};
</script>

<style scoped>
.test-home-container {
  background-color: #f5f5f5;
  display: flex;
  min-height: 80vh;
  border: 1px solid rgb(226, 226, 226);
  height: 100%;
}

.main-content-test {
  background-color: rgb(245, 245, 245);
  flex: 1;
  padding-left: 20px;
  padding-right: 20px;
  overflow-y: auto;
  height: 100%;
}
</style>
